/*
 * @Descripttion: GGB
 * @version: 1.0
 * @Author: GGB
 * @Date: 2021-12-09 21:25:37
 * @LastEditors: GGB
 * @LastEditTime: 2021-12-11 09:32:02
 */
import { createApp, h } from "vue";
import {
  createRouter,
  //   createWebHashHistory,
  createWebHistory,
} from "vue-router";
import App from "./App.vue";
import "./index.css";
import Todo from "./page/Todo.vue";
import Dashboard from "./page/Dashboard.vue";
import NotFound from "./components/NotFound.vue";
import { createStore } from "vuex";

const store = createStore({
  state() {
    return {
      count: 1,
    };
  },
  mutations: {
    add(state) {
      state.count++;
    },
  },
});

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "/",
      name: "Dashboard",
      component: Dashboard,
    },
    {
      path: "/todos",
      name: "Todo",
      component: Todo,
    },
    {
      path: "/:pathMatch(.*)*",
      name: "not-found",
      component: NotFound,
    },
  ],
  // 第一种方式
  // scrollBehavior(to, from, savedPosition) {
  //     if (savedPosition) {
  //         return savedPosition
  //     } else {
  //         // vue2 中的 x,y  vue3 中 left,top
  //         return { top: 0 }
  //     }
  // }
  // 第二种方式 使用keep-alive
});

router.addRoute({
  path: "/about",
  name: "about",
  component: () => import("./page/About.vue"),
});
router.addRoute("about", {
  path: "/about/info",
  name: "info",
  component: {
    render() {
      return h("div", "info page");
    },
  },
});
createApp(App)
  .component("comp", {
    render() {
      return h("div", "i am comp");
    },
  })
  .directive("highlight", {
    beforeMount(
      el,
      binding
      //   vode
    ) {
      el.style.background = binding.value;
    },
  })
  .use(store)
  .use(router)
  .mount("#app");
